<template>
	<view class="container">  
		<!--
		<view class="banner">
			<image class="banner-img" src="/static/banner.png"></image>
		</view>
		-->
		<view class="user-section">
			<view class="vip-card-box">
				<image class="card-bg" src="/static/vip-card-bg.png" mode=""></image>
				<view class="b-btn">
					￥{{foreverVipGoods.unitPrice}}
				</view>
				<view class="tit">
					<text class="yticon icon-iLinkapp-"></text>
					{{foreverVipGoods.name}}
				</view>
				<text class="e-m">{{foreverVipGoods.goodsBrief}}</text>
				<text class="e-b">{{foreverVipGoods.promotionDesc}}</text>
			</view>
		</view>
		
		<view class="bd">
			<image class="card-bg" src="/static/box07.jpg" mode=""></image>
			<view class="b-btn" >
				￥{{categoryGoods.unitPrice}}
			</view>
			<view class="tit">
				<text class="yticon icon-iLinkapp-"></text>
				{{categoryGoods.name}}-专栏会员
			</view>
			<text class="e-m">{{categoryGoods.goodsBrief}}</text>
			<text class="e-b">{{categoryGoods.promotionDesc}}</text>
		</view><!-- /.bd -->
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<text class="yticon icon-xiatubiao--copy"></text>
				<text>首页</text>
			</navigator>
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">￥{{categoryGoods.unitPrice}}专栏会员</button>
				<button type="primary" class=" action-btn no-border add-cart-btn" @click="buyAll">￥{{foreverVipGoods.unitPrice}}终身会员</button>
			</view>
		</view>
	</view>
</template>

<script>
	import commonOnLoad from '../../common/common_on_load.js';  
	import {  
	    mapState ,
		mapGetters
	} from 'vuex';  

    export default {
		components: {
		},
		computed: {
			...mapState(['forcedLogin']),
			...mapGetters(['hasLogin']),
            ...mapState(['userInfo'])  
		},
		data(){
			return {
				categoryGoodsId:0,//专栏商品ID
				foreverVipGoodsId:0,
				categoryGoods:{},//专栏信息
				foreverVipGoods:{}
				
			}
		},
		onShareAppMessage() {
			let path = "/pages/index/index";
			if(this.$store.getters.hasLogin){
				path = path + "?referenceId=" + this.$store.state.userInfo.id;
			}
			return {
				title: this.$mConfig.descTxt,
				path: path,
				imageUrl:this.$mConfig.logoImgUrl
			}
		},
		onLoad(options) {
			commonOnLoad.commonOnLoad(this.$mRoutesConfig.toVip,options,options.referenceId);//options.referenceId
			setTimeout(() => {
				// #ifdef H5  
				if (this.$wechat && this.$wechat.isWechat()) {  
					var url = this.$mConfig.baseUrl + "/api/shorturl/" + this.$mConfig.mpAppId + "/index";
					if(this.$store.getters.hasLogin){
						url = url + "?referenceId=" + this.$store.state.userInfo.id;
					}
					 this.$wechat.share({  
						  desc: this.$mConfig.descTxt,  
						  img: this.$mConfig.logoImgUrl,  
						  title:this.$mConfig.loginTitleTxt,  
					},url);  
				}  
				// #endif  
			}, 1000);
			
			if (options && options.id) {
				this.categoryGoodsId = options.id;
			}
			this.getGoods();
			// #ifdef MP
			if (!this.$store.getters.hasLogin ) {
				this.$store.commit("SET_IS_SILENT_LOGIN", true);
				this.silentLogin();
			}
			// #endif
		},
        methods: {
			async getGoods() {
				var query = {};
				let data = await this.$apis.getGoodsById(this.categoryGoodsId,query);
				this.categoryGoods = data.goods;
				
				let data2 = await this.$apis.getGoodsById(this.foreverVipGoodsId,query);
				this.foreverVipGoods = data2.goods;
			},
			async buy(){
				// #ifdef H5  
				var query = {};
				let data = await this.$apis.wxPayByGoodsId(this.categoryGoodsId,1,query);
				if (this.$wechat && this.$wechat.isWechat()) {  
					 this.$wechat.callPay(data);  
				}  
				// #endif  
			},
			async buyAll(){
				// #ifdef H5  
				var query = {};
				let data = await this.$apis.wxPayByGoodsId(this.foreverVipGoodsId,1,query);
				if (this.$wechat && this.$wechat.isWechat()) {  
					 this.$wechat.callPay(data);  
				}  
				// #endif  
			},
        }  
    }  	
</script>

<style  lang='scss'>
	.banner {
		height: 360upx;
		position: relative;
	}
	.banner-img {
		width: 100%;
		height:100%;
	}
	.user-section{
		margin-top: 10upx;
	}
	.bd{
		display:flex;
		flex-direction: column;
		color: #ffffff;
		height: 410upx;
		position: relative;
		padding: 20upx 24upx;
		.card-bg{
			border-radius: 16upx 16upx 16upx 16upx;
			position:absolute;
			top: 10upx;
			right: 0;
			width: 100%;
			height: 400upx;
			z-index: -1;
		}
		.b-btn{
			position: absolute;
			right: 20upx;
			top: 46upx;
			width: 182upx;
			height: 60upx;
			text-align: center;
			line-height: 60upx;
			font-size: 36upx;
			color: #36343c;
			font-weight: bold;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}
		.tit{
			margin-top: 20upx;
			font-size: $font-base+8upx;
			color: #ffffff;
			margin-bottom: 18upx;
			.yticon{
				color: #ffffff;
				margin-right: 16upx;
			}
		}
		.e-b{
			font-size: $font-base;
			color: #f7d680;
			margin-top: 10upx;
		}		
	}

	.vip-card-box{
		display:flex;
		flex-direction: column;
		color: #f7d680;
		height: 400upx;
		background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
		border-radius: 16upx 16upx 16upx 16upx;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;
		.card-bg{
			position:absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
			z-index: -1;
		}
		.b-btn{
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 182upx;
			height: 60upx;
			text-align: center;
			font-weight: bold;
			line-height: 60upx;
			font-size: 36upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}
		.tit{
			font-size: $font-base+8upx;
			color: #f7d680;
			margin-bottom: 28upx;
			.yticon{
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}
		.e-b{
			font-size: $font-base;
			color: #ffffff;
			margin-top: 10upx;
		}
	}
	
	/* 底部操作菜单 */
	.page-bottom{
		position:fixed;
		left: 30upx;
		bottom:30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255,255,255,.9);
		box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
		border-radius: 16upx;
		
		.p-b-btn{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;
			.yticon{
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}
			&.active, &.active .yticon{
				color: $uni-color-primary;
			}
			.icon-fenxiang2{
				font-size: 42upx;
				transform: translateY(-2upx);
			}
			.icon-shoucang{
				font-size: 46upx;
			}
		}
		.action-btn-group{
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30,#fa436a,#F56C6C);
			margin-left: 20upx;
			position:relative;
			&:after{
				content: '';
				position:absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255,255,255,.5);
			}
			.action-btn{
				display:flex;
				align-items: center;
				justify-content: center;
				width: 280upx;
				height: 100%;
				font-size: $font-base ;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}		
</style>
